<!-- 
  @name: 加注记录
  @date: 2020.3.10
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="total fixed_top">
			<view class="item">
				<view class="num">{{totalNum}}</view>
				<view class="note">加注总量(kg)</view>
			</view>
			<view class="item t2">
				<view class="num">{{totalMoney}}</view>
				<view class="note">加注总额(元)</view>
			</view>
			<view class="select_btn" @tap="openCloseDate">
				<text>日期筛选</text>
				<view class="_triangle" :class="showPopup ? 'atop' : 'abtm'"></view>
				<view class="date-content">
					<view>{{startTime}}</view>
					<view>{{endTime}}</view>
				</view>
			</view>
		</view>
		
		<!-- 日期筛选弹窗 -->
		<date-select
			top="140"
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<!-- 列表 -->
		<view class="listview">
			<view class="card" v-for="(item, index) in lists" :key="item.recordId">
				<view class="left">
					<view class="top">{{item.fillTime}}</view>
					<view class="text_over">{{item.siteName}}</view>
				</view>
				<view class="right">
					<view class="top">{{item.fillMoney}}元</view>
					<view class="btm">加注<text class="bn">{{item.fillNum}}</text>kg</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',  //客户id
				showPopup: false,  //是否显示日期筛选图层
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
				lists: [],  //列表
				page: 1,  //页码
				totalNum: '-',  //总加注量
				totalMoney: '-',  //总加注金额
			}
		},
		onLoad(e) {
			this.userId = e.userId;
			this.endTime = this.$getToday();
			this.startTime = this.$getStartDay();
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				this.showPopup = false;
				this.endTime = this.$getToday();
				this.startTime = this.$getStartDay();
				this.hasSelect();
			},
			//筛选
			hasSelect() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//打开/关闭日期筛选弹窗
			openCloseDate() {
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end) {
				this.showPopup = false;
				this.startTime = start;
				this.endTime = end;
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.recordUrl + 'getuserrecordpage',
					data: {
						userId: this.userId,
						page: this.page,
						rows: this.$tmp.ROWS_RET,
						startTime: this.startTime,
						endTime: this.endTime
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					this.totalMoney = res.totalMoney;
					this.totalNum = res.totalNum;
					let arr = res.lstFillRecord;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.total {
		width: 750rpx;
		height: 140rpx;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		background-color: $color-primary;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		.item.t2 {
			flex: 1;
		}
		.item {
			width: 230rpx;
			.num {
				font-size: 36rpx;
				color: $color-white;
				font-family: $font-family-num;
			}
			.note {
				font-size: 20rpx;
				color: $color-white;
				margin-top: 10rpx;
			}
		}
	}
	
	/* 列表 */
	.listview {
		width: 750rpx;
		height:auto;
		margin-top: 140rpx;
	}
	.card {
		width: 750rpx;
		height: 140rpx;
		padding: 0 30rpx;
		margin-bottom: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
			.top {
				font-size: 24rpx;
				font-family: $font-family-num;
				margin-bottom: 28rpx;
			}
		}
		.right {
			.top {
				font-size: 36rpx;
				font-family: $font-family-num;
				margin-bottom: 18rpx;
				text-align: end;
			}
			.btm {
				font-size: 24rpx;
				.bn {
					font-family: $font-family-num;
				}
			}
		}
	}
	.select_btn {
		width: 160rpx;
		position: relative;
		margin-bottom: -10rpx;
		
		.date-content {
			position: absolute;
			bottom: 55rpx;
			white-space: nowrap;
			> view {
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
</style>

